<template>

    <div class="echarts-box">
        <div class="echarts-item" v-loading="monthLoading" style="height:400px">
            <div :style="{ width: '50%' }" ref="MonthEchart" v-loading="monthLoading" element-loading-text="拼命加载中">
            </div>
            <div class="data-detail">
                <span class="text">
                    <!-- 上月数据：{{ lastMonthTotal }} -->
                    上月数据：<CountTo :end="lastMonthTotal" :duration="1000" />
                </span>
                <span class="text">
                    <!-- 本月数据：{{ monthTotal }} -->
                    本月数据：<CountTo :end="monthTotal" :duration="1000" />
                </span>
                <span class="text">
                    <!-- 本月对比上月增长：{{ monthTotal - lastMonthTotal }} -->
                    本月对比上月增长：<CountTo :end="monthTotal - lastMonthTotal" :duration="1000" />
                </span>
                <span class="text"  v-show="lastMonthTotal != 0">
                    <!-- 增长率：{{ (monthTotal - lastMonthTotal) / lastMonthTotal }} -->
                    <!-- 增长率：{{ Math.floor((monthTotal - lastMonthTotal) / lastMonthTotal * 100) }}% -->
                    本月对比上月增长率：<CountTo :end="Math.floor((monthTotal - lastMonthTotal) / lastMonthTotal * 100)" :duration="2000" />%
                </span>
                <span class="text">
                    <!-- 增长率：{{ (monthTotal - lastMonthTotal) / lastMonthTotal }} -->
                    <!-- 增长率：{{ Math.floor((monthTotal - lastMonthTotal) / lastMonthTotal * 100) }}% -->
                    本年度总入账：<CountTo :end="yearTotal" :duration="1000" />
                </span>
            </div>
        </div>
        <div class="echarts-item" v-loading="weekLoading" style="height:400px">
            <div :style="{ width: '50%' }" ref="WeekEchart" v-loading="weekLoading" element-loading-text="拼命加载中"></div>
            <div class="data-detail">


                <span class="text">
                    <!-- 上周数据：{{ lastWeekTotal }} -->
                    上周数据：<CountTo :end="lastWeekTotal" :duration="1000" />
                </span>
                <span class="text">
                    <!-- 本周数据：{{ weekTotal }} -->
                    本周数据：<CountTo :end="weekTotal" :duration="1000" />
                </span>
                <span class="text">
                    <!-- 本周对比上周增长：{{ weekTotal - lastWeekTotal }} -->
                    本周对比上周增长：<CountTo :end="weekTotal - lastWeekTotal" :duration="1000" />
                </span>
                <span class="text" v-show="lastWeekTotal != 0">
                    <!-- 增长率：{{ (weekTotal - lastWeekTotal) / lastWeekTotal }} -->
                    <!-- 增长率：{{ Math.floor((weekTotal - lastWeekTotal) / lastWeekTotal * 100) }}% -->
                    本周对比上周增长率：<CountTo :end="Math.floor((weekTotal - lastWeekTotal) / lastWeekTotal * 100)" :duration="2000" />%
                </span>
            </div>
        </div>

        <!--         
        <div :style="{ width: '50%', height: '40vh' }" ref="MonthEchart" v-loading="monthLoading"
            element-loading-text="拼命加载中"></div>
        <div :style="{ width: '50%', height: '40vh' }" ref="WeekEchart" v-loading="weekLoading"
            element-loading-text="拼命加载中"></div> -->
        <!-- <div id="MonthEchart" :style="{ width: '50%', height: '40vh' }"></div> -->
    </div>
    <!-- <div></div> -->
</template>
    
<script lang="ts">
import { defineComponent, markRaw, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import CountTo from '@/components/CountTo.vue'
import request from '@/utils/request';
export default defineComponent({
    name: 'HOrderEChartsView',
    components: {
        // countTo 
        CountTo
    },
    setup() {
        const monthTotal = ref(0)
        const lastMonthTotal = ref(0)
        const weekTotal = ref(0)
        const lastWeekTotal = ref(0)
        const yearTotal = ref(0)
        onMounted(() => {
            initMonth()
            initWeek()
            // 模拟loading
            // setTimeout(() => {
            //     initMonth()
            //     initWeek()
            // }, 3000)
        })
        const monthLoading = ref(true)
        const weekLoading = ref(true)
        // 每月视图 EChart
        const monthData = ref()
        const getMonthData = async () => {
            await request.get('/h/order/getMonthData').then((res: any) => {
                if (res.code == 200) {
                    monthData.value = res.data
                    initDetail('month')
                }
            })
        }
        const MonthEchart: any = ref<HTMLElement | null>(null)
        // const MonthEchart: any = document.getElementById('MonthEchart')
        const initMonth = async () => {
            await getMonthData()

            monthLoading.value = false
            console.log(monthData.value);
            console.log(MonthEchart);

            const chart = ref<any>()
            //  用 markRaw 让echarts从监听对象变成普通对象！！因为vue3中的数据对象是用的proxy监听的，要取值需要用value等方法取出来。
            chart.value = markRaw(echarts.init(MonthEchart.value!))
            chart.value.setOption({
                title: {
                    text: '每月数据',
                    subtext: new Date,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    type: 'category',
                    data: monthData.value.xAxis.reverse()
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '月入账金额',
                        data: monthData.value.seriesData.reverse(),
                        type: 'line'
                    }
                ]
            });

        }

        // 每周视图 EChart
        const weekData = ref()
        const getWeekData = async () => {
            await request.get('/h/order/getWeekData').then((res: any) => {
                if (res.code == 200) {
                    weekData.value = res.data
                    initDetail('week')
                }
            })
        }
        const WeekEchart: any = ref<HTMLElement | null>(null)
        const initWeek = async () => {
            await getWeekData()
            weekLoading.value = false
            const chart = ref<any>()
            chart.value = markRaw(echarts.init(WeekEchart.value!))
            chart.value.setOption({
                title: {
                    text: '近四周数据',
                    subtext: new Date,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    type: 'category',
                    data: weekData.value.xAxis.reverse()
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '周入账金额',
                        data: weekData.value.seriesData.reverse(),
                        type: 'line'
                    }
                ]
            });

        }
        // 计算数值
        const initDetail = (type: string) => {
            if (type === 'month') {
                monthTotal.value = monthData.value.seriesData[0]
                lastMonthTotal.value = monthData.value.seriesData[1]
                if (monthData.value.seriesData.length >0){
                    for (const i in monthData.value.seriesData) {
                        console.log(monthData.value.seriesData[i]);
                        yearTotal.value += monthData.value.seriesData[i]
                    }
                    
                }
            }
            if (type === 'week') {
                weekTotal.value = weekData.value.seriesData[0]
                lastWeekTotal.value = weekData.value.seriesData[1]
            }


        }
        return {
            MonthEchart,
            WeekEchart,
            monthLoading,
            weekLoading,
            monthData,
            weekData,
            monthTotal,
            lastMonthTotal,
            weekTotal,
            lastWeekTotal,
            yearTotal
        }
    }

});
</script>
<style scoped>
.echarts-item {
    display: flex;
    /* align-items: center; */
}

/* .echarts-item data-detail{
    line-height: 400px;
} */
.data-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.text {
    display: block;
    height: 30px;
}
</style>